<template>
  <div class="more-page">
    <div class="body">
      <ul>
        <li>
          <h2>证照高效代办</h2>
          <p>公司注册</p>
          <p>公司迁移</p>
          <p>公司注销</p>
          <p>各类许可证办理</p>
          <a @click="showMessage">了解详情</a>
        </li>
        <li>
          <h2>人工上门服务</h2>
          <p>专业平台人员上门</p>
          <p>商铺信息核实，保障真实性</p>
          <p>360°全景照片展示</p>
          <p></p>
          <a @click="showMessage"> 了解详情</a>
        </li>
        <li>
          <h2>商铺网站、微信小程序</h2>
          <p>开发周期短</p>
          <p>数据安全保障</p>
          <p>维护简单</p>
          <p>实时生效</p>
          <a @click="showMessage">了解详情</a>
        </li>
        <li>
          <h2>商铺诊断分析</h2>
          <p>商铺选址</p>
          <p>客流分析</p>
          <p>运营优化</p>
          <p></p>
          <a @click="showMessage">了解详情</a>
        </li>
        <li>
          <h2>专业视频推广</h2>
          <p>抖音，快手等各大短视频网站同步宣传</p>
          <p>商铺形象优化</p>
          <p>宣传剧本设计</p>
          <p></p>
          <a @click="showMessage">了解详情</a>
        </li>
        <li>
          <h2>供应链服务</h2>
          <p>设备租赁</p>
          <p>原材料供应</p>
          <p>人力资源</p>
          <p>设计装修</p>
          <p>广告设计</p>
          <a @click="showMessage">了解详情</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "morePage",
    methods:{
      showMessage(){
        this.$alert('13764690791（微信同号）')
      }
    }
  }
</script>

<style scoped lang="less">
  .more-page {
    background-color: #fff;

    .body {
      width: 1200px;
      margin: 20px auto 50px;

      > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        > li {
          cursor: pointer;
          border: 1px solid #e5e5e5;
          flex: 0 0 32%;
          margin-bottom: 30px;

          h2 {
            margin-top: 20px;
            color: #000;
          }

          p {
            color: #333;
            margin-top: 10px;
          }

          a {
            display: block;
            margin-top: 15px;
            margin-bottom: 15px;
            cursor: pointer;
          }
          transition: 300ms;
          &:hover{
            box-shadow: 0 0 3px grey;
          }
        }
      }
    }
  }
</style>
